<template>
  <div class="main">
    <div class="contain">
      <div
        class="top"
        style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/codeB.png') no-repeat; background-size: 100% 100%;"
      >
        <div class="number">
          <div class="current">
            <img :src="userInfo.headImg" alt />
          </div>
          <span class="totalQuestion">{{userInfo.fullName}}</span>
        </div>
      </div>
      <div class="middle">
        <div
          class="answer"
          style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/codeBox.png') no-repeat; background-size: 100% 100%;"
        >
          <img :src="userInfo.qrCode" alt />
        </div>
      </div>
    </div>
    <div class="bottom">
      <button open-type="share">分享</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {},
  data() {
    return {
      companyDetail: ""
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {},
  mounted() {
    this.companyDetail = this.$mp.query.companyDetail;
  },
  watch: {},
  // 点击分享二维码
  onShareAppMessage() {
    var that = this;
    return {
      title: this.companyDetail,
      imageUrl: this.userInfo.qrCode,
      // desc: '分享页面的内容',
      path: "/pages/index/index/main?id=" + that.userInfo.id // 路径，传递参数到指定页面。
    };
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang="less">
.main {
  overflow: hidden;
  .contain {
    border-radius: 2px;
    border: 1px solid rgba(223, 233, 237, 1);
    margin: 37px 22px 35px 23px;
    // box-shadow: 0px 6px 20px 0px rgba(107, 158, 158, 0.3);
  }
  .top {
    height: 130px;
    overflow: hidden;
    .number {
      margin: 33px 0 0 30px;
      display: flex;
      .current {
        width: 78px;
        height: 78px;
        margin-right: 14px;
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          object-fit: cover;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
          border: 4px solid rgba(255, 255, 255, 1);
        }
      }
      .totalQuestion {
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 700;
        color: rgba(2, 6, 4, 1);
        line-height: 78px;
      }
    }
  }
  .middle {
    padding: 9px 26px 26px;
    .answer {
      height: 208px;
      padding: 35px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 48px;
    width: 100%;
    button {
      border-radius: 2px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFangSC;
      font-weight: 500;
      line-height: 42px;
      margin: 0 23px 0 22px;
      background: rgba(24, 119, 152, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
